<template>
  <div class="box" ref="container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";

const container = ref(null);
const box = {
  viewer: null,
};

onMounted(() => {
  box.viewer = new Cesium.Viewer(container.value, {
    infoBox: false,
    timeline: false,
    vrButton: false,
    geocoder: false,
    animation: false,
    homeButton: false,
    scene3DOnly: true,
    sceneModePicker: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    selectionIndicator: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
  });
  box.viewer.scene.debugShowFramesPerSecond = true;
  box.viewer._cesiumWidget._creditContainer.style.display = "none";
});

defineExpose({
  box,
});
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  inset: 0;
}
</style>
